<template>
    <el-select v-model="inValue" v-on="$listeners" v-bind="$attrs">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>

<script>
import { cloneDeep } from 'lodash-es';
import { wifiModeDict } from '@/constant/dict';

export default {
    name: 'WiFiChannel',
    props: {
        value: [String],
        wifiType: {
            type: String,
            default: ''
        },
        channelWidth: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            options: []
        };
    },
    computed: {
        inValue: {
            get: function () {
                return this.value;
            },
            set: function (newValue) {
                this.$emit('input', newValue);
            }
        }
    },
    methods: {
        async fetchData() {
            let result = '';

            let node = '';

            // 5G
            if (this.wifiType == wifiModeDict.WIFI5) {
                node = 'wifi_channel_list_5g';
            }
            // 6G
            else if (this.wifiType == wifiModeDict.WIFI6) {
                node = 'WIFI_CHANNEL_LIST_6G';
            }
            // 2.4G
            else {
                node = 'wifi_channel_list_24g';
            }

            const res = await this.$getNodeFromServer(...[node]);

            if (res && res[node]) {
                result = res[node];
            }

            if (result) {
                const { value, options } = this.channelDataHandle(this.channelWidth, result);
                this.$emit('input', value);
                this.options = options;
            }
        },

        /**
         * @description 获取信道下拉列表
         * @param {*} fetchChannel
         * @param {*} channelWidth
         */
        getChannelOptions(fetchChannel, channelWidth) {
            try {
                if (fetchChannel) {
                    const channel = JSON.parse(fetchChannel);

                    let channelArr = [];

                    for (const key in channel) {
                        const keyNum = key.replace(/\D/g, '');
                        if (keyNum == channelWidth) {
                            channelArr = channel[key].split(',');
                        }
                    }

                    const channelOptions = channelArr.map((item) => {
                        return {
                            value: item.replace(/\D/g, ''),
                            label: isNaN(Number(item.replace(/\s/g, ''))) ? this.$t('netWork.wifiSettings.' + item.replace(/\s/g, '')) : item
                        };
                    });

                    channelOptions.unshift({
                        value: '0',
                        label: this.$t('netWork.wifiSettings.item_wifi_auto_ch_2g_0')
                    });

                    return channelOptions;
                }
            } catch (error) {
                return [];
            }
        },

        /**
         * 信道数据处理
         * @param {string} channelWidth 频宽
         * @param {Object} fetchChannel 返回的信道列表
         * @param {string} wifi WIFI类型
         */
        channelDataHandle(channelWidth, fetchChannel) {
            const formatWidth = channelWidth.replace(/\D/g, '');

            const channelOptions = this.getChannelOptions(fetchChannel, formatWidth);

            if (channelOptions) {
                let map = channelOptions.reduce((map, obj) => {
                    map.set(obj.value, obj.label);
                    return map;
                }, new Map());

                let value = cloneDeep(this.inValue);

                if (!map.has(String(value))) value = '0';

                return {
                    value,
                    options: channelOptions
                };
            }
        }
    },
    created() {
        this.fetchData();
    }
};
</script>

<style lang="less" scoped></style>
